<template>
    <div class="photo-container">
        <h3 class="title">{{photoinfo.title}}</h3>

        <p class="info">
            <span>发表时间：{{photoinfo.add_time|dataFormat}}</span>
            <span>点击：{{photoinfo.click}}</span>
        </p>
       
        <!--缩略图区域-->
        <div class="thumb-img-list">
            <!-- <img class="preview-img" v-for="(item, index) in photolist" :src="item.src"   height="100" @click="$preview.open(index,photolist)"> -->
            <vue-preview :slides="photolist"></vue-preview>
        </div>

        <!--内容区域-->
        <div class="content" v-html="photoinfo.content"></div>

        <!-- 评论子组件 -->
        <!-- 注意:在使用评论子组件的时候，人家必须要接收一个newsid的属性 -->
        <comment :newid="id"></comment>
    </div>
</template>
<script>
//导入评论子组件
import comment from '../sub-components/Comment.vue';
export default {
    data(){
        return {
            photoinfo: [],//图片信息
            photolist: [],
        };
    },
    created(){
        this.getPhotoInfo();
        this.getThumbImg();
    },
    methods:{
        //当调用一个异步的方法，同时，这个异步方法的返回值是 Promise对象的时候，才可以使用await和async
        async getPhotoInfo(){
            const {data} = await this.$http.get('/api/getimageInfo/'+this.id);
            if(data.status === 0) return this.photoinfo = data.message[0];
        },
        //获取图片的缩略图数据
        async getThumbImg(){
            const {data} = await this.$http.get("/api/getthumimages/"+this.id);
            console.log(data)
            if(data.status === 0) {
                if(data.status === 0) {
                    data.message.forEach((item,i) => {
                        item.w = 600;
                        item.h = 400;
                        item.msrc = data.message[i].src;
                    });
                this.photolist = data.message
                }
            }
        }
    },
    props:['id'],
    components:{
        comment
    }
}
</script>
<style lang="scss" scoped>
.photo-container{
    padding: 3px;
}
.title{
    font-size: 15px;
    text-align: center;
    margin: 15px 0;
    color:#26a2ff;
}
.info{
    font-size: 13px;
    display: flex;
    justify-content: space-between;
}

.content{
    font-size: 13px;
    line-height: 30px;
}

</style>
